<template>
	<view class="user" :style="[background]">
		<view class="header" :class="{loginHeader: isLogin}">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar :is-back="false" title="个人中心" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + navBg + ')' }"
					:title-color="navBg > 0.5 ? '#000' : '#000'"></u-navbar>
			</u-sticky>
			<!-- #endif -->
			<view class="user-info row-between" :class="{'user_not_login': !isLogin}">
				<view class="info row">
					<image class="avatar mr20 flexnone" @tap="goLogin"
						:src="(isLogin && userInfo.avatar) ? userInfo.avatar : '/static/images/my_portrait_empty.png'">
					</image>
					<view v-if="isLogin">
						<view class="name xxl line1" @tap="goLogin">
							{{userInfo.nickname || '点击添加昵称'}}
						</view>
						<view class="user-id row-between" v-if="userInfo.sn">
							<view class="xs white ml20 mr20">积分: {{userInfo.sn || ''}}</view>
							<!-- <view class="xs normal copy-btn row-center ml5" @tap.stop="onCopy">复制</view> -->
						</view>
					</view>
					<view v-else @tap="goLogin" class="login-text-main">
						<view style="font-size: 42rpx" class="login-text">点击登录</view>
						<view class="sm">登录体验更多功能</view>
					</view>
				</view>
				<view v-if="false" class="row" style="align-self: flex-start;">
					<view class="user-opt" @tap="goPage('/bundle/pages/user_profile/user_profile')">
						<image style="width:58rpx;height: 58rpx;" src="/static/images/icon_my_setting.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="page-container">
			<view class="order-nav bg-white">
				<view class="title row-between" @tap="goPage('/pages/user_order/user_order')">
					<view class="lg">我的订单</view>
					<view class="muted sm row">
						全部订单
						<image class="icon-sm ml10" src="/static/images/arrow_right.png"></image>
					</view>
				</view>
				<view class="nav row">
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?state=0')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_pay" class="badge xs row-center bg-white">
								{{userInfo.wait_pay}}
							</view>
							<image class="nav-icon" src="/static/images/icon-001.png"></image>
						</view>
						<view class="sm mt10">待付款</view>
					</view>
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?state=1')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_delivery" class="badge xs row-center bg-white">
								{{userInfo.wait_delivery}}
							</view>
							<image class="nav-icon mb10" src="/static/images/icon-002.png"></image>
						</view>
						<view class="sm">待服务</view>
					</view>
					<!-- <view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?state=2')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_take" class="badge xs row-center bg-white">
								{{userInfo.wait_take}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_shouhuo.png"></image>
						</view>
						<view class="sm mt10">待核销</view>
					</view> -->
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?state=3')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
								{{userInfo.wait_comment}}
							</view>
							<image class="nav-icon" src="/static/images/icon-005.png"></image>
						</view>
						<view class="sm mt10">已服务</view>
					</view>
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?state=-1')">
						<view class="icon-contain">
							<view v-if="userInfo.after_sale" class="badge xs row-center bg-white">
								{{userInfo.after_sale}}
							</view>
							<image class="nav-icon" src="/static/images/icon-004.png"></image>
						</view>
						<view class="sm mt10">退款售后</view>
					</view>
					<!-- <view class="item column-center mb20" @tap="goPage('/bundle/pages/post_sale/post_sale1')">
						<view class="icon-contain">
							<view v-if="userInfo.after_sale" class="badge xs row-center bg-white">
								{{userInfo.after_sale}}
							</view>
							<image class="nav-icon" src="/static/images/icon-004.png"></image>
						</view>
						<view class="sm mt10">退款售后</view>
					</view> -->
					<view class="item column-center mb20"
						@tap="goPage('/bundle/pages/goods_comment_list/goods_comment_list1')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
								{{userInfo.wait_comment}}
							</view>
							<image class="nav-icon" src="/static/images/icon-003.png"></image>
						</view>
						<view class="sm mt10">评价</view>
					</view>

				</view>
			</view>
		</view>
		<view class="page-container" v-if="marketer">
			<view class="my-assets bg-white">
				<view class="title row-between" @tap="goPage('/bundle/pages/user_spread/user_spread', true)">
					<view class="lg">分享赚钱</view>
					<view class="muted sm row">
						我的推客中心
						<image class="icon-sm ml10" src="/static/images/arrow_right.png"></image>
					</view>
				</view>
				<view class="nav row">
					<!-- <view class="column-center mb20 assets-item" @tap="goPage('/bundle/pages/user_spread/user_spread')">
						<view class="xl primary">{{ userInfo.distribution_data.level_name }}</view>
						<view class="sm">我的等级</view>
					</view> -->
					<view class="column-center mb20 assets-item" @tap="goPage('/bundle/pages/balance_log/balance_log')">
						<view class="xl primary">¥{{ market.month_commission ? market.month_commission / 100 : 0 }}
						</view>
						<view class="sm">当月佣金</view>
					</view>
					<view class="column-center mb20 assets-item" @tap="goPage('/bundle/pages/balance_log/balance_log')">
						<view class="xl primary">¥{{ market.all_commission ? market.all_commission / 100 : 0 }}</view>
						<view class="sm">累计佣金</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabs :list="tabList" active-color="#000000" inactive-color="#C7C4CC" :is-scroll="true" :current="currentTab"
			@change="tabChange"></u-tabs>
		<view class="hot" style="padding-top: 20rpx;background-color: #ffffff;">
			<active-area type="hot" progressBarColor="#9912FE" :lists="indexList.list">
			</active-area>
			<loading-footer :status="indexList.status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无商品</text>
				</view>
			</loading-footer>
		</view>
		<view class="server-nav bg-white" v-if="menuList && menuList.length > 0">
			<view>
				<view class="title row-between">
					<view class="lg">我的功能</view>
				</view>
			</view>
			<view class="nav row wrap">
				<button v-for="(item, index) in menuList" :key="index" class="item column-center mb20"
					hover-class="none" :open-type="item.link_type == 3 ?'contact' :''" @tap="tapMenu(item)"
					style="width: 25%;">
					<image class="nav-icon" :src="item.image"></image>
					<view class="sm mt10">{{item.name}}</view>
				</button>
			</view>
		</view>
		<u-popup :value="loginShow" mode="bottom" border-radius="14" :closeable="true">
			<view class="login-pop">
				<view style="font-size: 42rpx" class="login-pop-btn" @click="goLogin">登录</view>
				<view class="login-pop-text">登录体验更多功能</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		refreshToken
	} from '@/api/app'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getUser
	} from '@/api/user';
	import {
		getMenu
	} from '@/api/store'
	import {
		toLogin,
		wxMnpLogin
	} from '@/utils/login'
	import {
		loadingType
	} from '@/utils/type'
	import {
		getGoodsSearch,
		getCatrgory
	} from '@/api/store';
	import {
		loadingFun,
		menuJump,
		copy,
		setTabbar
	} from '@/utils/tools'
	import Cache from '@/utils/cache'
	import PageExposure from "@/mixins/page_exposure.js"

	const app = getApp()
	export default {
		mixins: [PageExposure],
		data() {
			return {
				showNav: false,
				navH: 0,
				navBg: 0,
				menuList: [],
				statusBarH: "",
				market: {},
				userInfoObj: {
					avatar: '',
					nickname: ''
				},
				indexList: {
					params: {
						page: 1,
						pagesize: 10,
						id: null,
						first_cate_id: null,
						second_cate_id: null,
						third_cate_id: null,
						province: null,
						city: null,
						search_keyword: null,
						merchant_id: null,
						order_column: null, // 排序字段 platform_commission-平台佣金（默认） sale_nunm-销量
						order_value: null, // 排序方式 desc-倒序，默认 asc-升序
						// last_group_limit: 1 // 获取未成团订单数量，默认为1
					},
					list: [],
					status: loadingType.LOADING,
				},
				currentTab: 0,
				tabList: [],
				cateOptions: [],
				marketer: null
			};
		},

		components: {},
		props: {},

		async onLoad(options) {
			setTabbar()
			this.getUser().then(() => {
				this.market = this.$store.getters.market
			});
			this.getGoodsList();
			const cates = await getCatrgory();
			this.cateOptions = cates.d.data
			this.tabList = []
			this.tabList.push({
				id: null,
				name: '全部项目'
			})
			if (this.cateOptions && this.cateOptions.length) {
				this.delArr(this.cateOptions)
				this.cateOptions.forEach(item => {
					this.tabList.push({
						id: item.id,
						name: item.name
					})
				})
			}
			// this.getMenuFun();
		},

		onShow() {
			this.getUserInfo()
			this.marketer = this.$store.getters.userInfo.marketer || 0
			// this.getCartNum()
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},

		onUnload() {},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getGoodsList();
			// this.getMenuFun();
		},
		onReachBottom() {
			//this.getBestListFun()
			this.getGoodsList();
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image
			};
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/bundle/pages/user_profile/user_profile'
					});
					return;
				}
				toLogin()
			},

			async getGoodsList() {
				if (loadingType.FINISHED == this.indexList.status) return;
				const data = await loadingFun(getGoodsSearch, this.indexList.params.page, this.indexList.list, this
					.indexList.status, this.indexList.params);
				console.log(data, 'data')
				if (!data) return
				this.indexList.params.page = data.page;
				this.indexList.list = data.dataList;
				this.indexList.status = data.status;
			},

			getUserInfo() {
				refreshToken().then(res => {
					if (res.s === 0) {
						this.$store.dispatch('setUser', res.d)
					}
				})
			},
			tabChange(index) {
				this.currentTab = index;
				this.indexList.params.first_cate_id = this.tabList[index].id
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			goPage(url, isCheckMarketer = false) {
				if (!this.isLogin) return toLogin()
				if (isCheckMarketer && !this.userInfo.marketer) {
					return uni.showToast({
						title: "您还不是达人",
						icon: "error"
					})
				}
				uni.navigateTo({
					url
				});
			},
			delArr(obj) {
				obj.forEach(item => {
					if (item.children && item.children.length) {
						this.delArr(item.children)
					} else {
						item.children = ''
					}
				})
			},
			tapMenu(item) {
				if (!this.isLogin) return toLogin()
				console.log(item)
				menuJump(item)
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				if (code == 1) {
					this.menuList = data
				}
			},

			onCopy(e) {
				copy(this.userInfo.sn)
			},



		},
		computed: {
			...mapGetters(["cartNum", "userInfo", "inviteCode", "appConfig"]),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`
				} : {}
			},
			loginShow() {
				// return !this.isLogin
				return false
			}
		}
	};
</script>
<style lang="scss">
	.user {
		min-height: 100vh;
		background-image: url("https://s.0794cn.com/linlv/sku/1719505336956.png");
		background-size: 100% 100vh;
		background-repeat: no-repeat;
		background-color: #f0f0f0;

		.header {
			display: flex;
			flex-direction: column;
			height: 420rpx;

			/*420rpx;*/
			.user-info {
				padding: 30rpx;
				//#ifdef  H5 
				padding-top: 90rpx;

				//#endif
				.avatar {
					height: 110rpx;
					width: 110rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					text-align: left;
					margin-bottom: 5rpx;
					max-width: 400rpx;
				}

				.user-id {
					border: 1px solid white;
					border-radius: 100rpx;

					.copy-btn {
						background-color: #FFDFDA;
						height: 40rpx;
						width: 90rpx;
						border-radius: 100rpx;
					}
				}

				.user-opt {
					position: relative;

					.dot {
						position: absolute;
						background-color: #ee0a24;
						border: 2rpx solid #FFFFFF;
						color: $-color-primary;
						border-radius: 100%;
						top: 6rpx;
						right: 0rpx;
						font-size: 22rpx;
						min-width: 16rpx;
						height: 16rpx;
					}
				}

				.buyer-type {
					background-color: #FFA200;
					height: 38rpx;
					padding: 0 10rpx;
				}
			}

			.member {
				flex: 1;
				padding: 0 20rpx;

				.member-entery {
					color: #FFE0A1;
					padding: 0 16rpx;
					width: 100%;
					height: 80rpx;
					background: url(../../static/images/bg_member_grade.png);
					background-size: 100%;
				}
			}

		}

		.loginHeader {
			height: 340rpx;
		}

		.order-nav {
			width: 100%;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;

			.icon-contain {
				position: relative;
			}
		}

		.order-nav,
		.my-assets {
			border-radius: 16rpx;
			overflow: hidden;
			// margin: 20rpx 20rpx 0;
			// border-radius: 8rpx;
		}

		.server-nav {
			margin: 20rpx;
			border-radius: 8rpx;
		}

		.title {
			height: 88rpx;
			padding: 0 30rpx;
			// border-bottom: $-dashed-border;
		}

		.nav {
			padding: 26rpx 0 0;

			.assets-item {
				flex: 1;
			}

			.item {
				width: 25%;
			}

			.badge {
				padding: 0 6rpx;
				min-width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx;
				box-sizing: border-box;
				border: 1rpx solid $-color-primary;
				color: $-color-primary;
				position: absolute;
				left: 33rpx;
				top: -10rpx;
				z-index: 2;
			}

			.nav-icon {
				width: 52rpx;
				height: 52rpx;
			}
		}
	}

	.user_not_login {
		.info {
			width: 100%;
			flex-wrap: wrap;
			justify-content: center;
		}

		.sm {
			display: none;
		}

		.white {
			width: 100%;
		}

		.login-text {
			text-align: center;
			font-size: 34rpx !important;
			width: 100%;
		}

		.avatar {
			margin-right: 0;
		}
	}

	.page-container {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.login-text-main {
		width: 100%;
	}

	.login-pop {
		width: 100%;
		box-sizing: border-box;
		padding: 120rpx 40rpx;

		.login-pop-btn {
			text-align: center;
			width: 60%;
			border-radius: 14rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #FF5E61;
			margin: 0 auto 20rpx;
			font-size: 32rpx;
			color: #ffffff;
		}

		.login-pop-text {
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>